<template>
	<view style="height: 100%;width: 100%;" ref="mainQuestionItem">
		<swiper circular style="height: 100%;width: 100%;" v-if="type == 1" class="swiper" :current="currentIndex"
			:indicator-dots="false" :autoplay="false" @change="swiperChangeManager">
			<swiper-item v-for="(item,index) in mainTransferItemList" :key="item.id">
				
				
				<view style="width: 100%;height: 100%;">
					<!-- 1. 标题 -->
					<view class="cu-bar solid-bottom" style="padding-top: 20rpx;">
						<view class="action text-black"
							style="display: flex;flex-direction: column;align-items: flex-start;">
							<span class="cuIcon-title text-black"
								style="font-weight: bold;color: #5F7E8B;">{{index + 1}} 、 <span style="color: #646566;">
									{{item.question_name}}</span></span>
							<view style="width: 100%;max-height: 200rpx;padding-left: 20rpx;">
								<van-image v-if="index <= currentIndex + 1" height="200rpx" lazy-load use-error-slot
									use-loading-slot fit="heightFix" :src="item.question_image">
									<van-loading slot="loading" type="spinner" size="20" vertical />
									<text slot="error">加载失败【{{item.question_image}}】</text>
								</van-image>
							</view>

						</view>
					</view>

					<view style="padding: 20rpx;">
						<scroll-view :style="{ height: `calc(${transferViewHeight}px - ${300}rpx)`}"
							:scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
							<van-radio-group :value="item.userAnswer" @change="radioOnChange">
								<van-cell-group :border="false">
									<van-cell v-for="option in item.optionsItems" :key="option.id" clickable
										:data-name="option.id" @click="optionOnClick(item,option)" :border="false">
										<van-radio slot="icon" :name="option.id" />
										<view slot="title">
											<block v-if="option.image">
												<van-image v-if="index <= currentIndex + 1" lazy-load height="150rpx"
													fit="heightFix" :src="option.image" @click.stop="smartImgManager" />
											</block>
											<block v-else>
												<span>{{option.name}}</span>
											</block>
										</view>
									</van-cell>
								</van-cell-group>
							</van-radio-group>
						</scroll-view>
					</view>
				</view>
				
			</swiper-item>
		</swiper>



		<!-- 悬浮按钮-->
		<view class="tn-flex  tn-footerfixed" v-show="currentIndex == transferItemList.length - 1">
			<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
				<tn-button shape="round" :disabled="btnDisabled"
					:backgroundColor="btnDisabled == true ? '#C6D1D8': 'tn-bg-blue'" padding="40rpx 0" width="60%"
					shadow fontBold @click="submitManager">
					<text class="tn-color-white">提交</text>
				</tn-button>
			</view>
		</view>

		<!-- 添加广告 -->
		<mainAd ref="mainAd" :transfer-type="'video'" @actionEventManager="adActionEventManager" />
	</view>

</template>

<script>
	import mainAd from '@/components/Ad/mainAd.vue'

	export default {
		components: {
			mainAd,
		},
		data() {
			return {
				dynamicHeight: 0,

				//  选项框的高度
				optionViewHeight: 0,

				// 0.外部传入的数据
				mainTransferItemList: [],
				// 1. 按钮 是否可以点击
				btnDisabled: false,


				type: 1,
				currentIndex: 0,
			}
		},

		mounted() {
			console.log("mounted")
		},

		onLoad(item) {
			console.log('页面加载')

		},
		onShow() {
			console.log('页面显示')
		},
		onReady() {
			console.log('页面初次显示')

		},
		onHide() {
			console.log('页面隐藏')
		},
		onUnload() {
			console.log('页面卸载')
		},
		onBackPress() {
			console.log('页面返回...')
		},
		onShareAppMessage() {
			console.log('分享!')
		},
		onReachBottom() {
			console.log('下拉加载...')
		},
		onPageScroll() {
			console.log('页面滚动...')
		},
		onPullDownRefresh() {

		},

		props: {
			transferItemList: {
				type: Array,
				default: function() {
					return []
				}
			},
			transferViewHeight: {
				type: Number,
				default: 0,
			}
		},



		watch: {
			transferItemList(val) {
				if (val) {
					this.mainTransferItemList = JSON.parse(JSON.stringify(val));
				}
			},
			transferViewHeight(val) {
				if (val) {
					this.dynamicHeight = val - 110;
				}
			},
		},


		methods: {
			adActionEventManager(method, item, cname, realitem) {
				console.log(method, item, cname, realitem);
				if (method === 'close') {
					if (item == true) {
						// 广告播放成功
						this.$emit('actionEventManager', 'submit', this.mainTransferItemList);
					} else {

					}
				}
			},
			// 选项
			swiperChangeManager(item) {
				this.currentIndex = item.detail.current;

				this.swipChangeAnimation(item);
			},

			// 1. 单选 选择
			radioOnChange(val) {
				this.currentQuestion.userAnswer = val;
			},

			// 2. cell 选择
			optionOnClick(item, option) {
				this.mainOptionSelectedManager(item, option.id);

				// 1. 翻页
				if (this.currentIndex < this.mainTransferItemList.length - 1) {
					this.currentIndex += 1;
				}

				this.swipChangeAnimation(item);
			},

			mainOptionSelectedManager(item, selected) {
				
				var currentItem = this.mainTransferItemList[this.currentIndex];
				currentItem.userAnswer = selected;

				currentItem.optionsItems.forEach((item, index) => {
					if (item.id == selected) {
						if (index == 0) {
							currentItem.userAnswerType = "A";
						} else if (index == 1) {
							currentItem.userAnswerType = "B";
						} else if (index == 2) {
							currentItem.userAnswerType = "C";
						} else if (index == 3) {
							currentItem.userAnswerType = "D";
						} else if (index == 4) {
							currentItem.userAnswerType = "E";
						} else if (index == 5) {
							currentItem.userAnswerType = "F";
						} else if (index == 6) {
							currentItem.userAnswerType = "G";
						} else if (index == 7) {
							currentItem.userAnswerType = "H";
						}
						currentItem.userAnswerIndex = index;
					}
				});
			},

			swipChangeAnimation(item) {
				if (this.currentIndex == this.mainTransferItemList.length - 1) {
					var currentQuestion = this.mainTransferItemList[this.currentIndex];

					
					if (currentQuestion.userAnswer == '' || currentQuestion.userAnswer == null) {
						this.btnDisabled = true;
					} else {
						this.btnDisabled = false;
					}
				} else {
					this.btnDisabled = false;
				}



				// 2.返回进度
				this.$emit('actionEventManager', 'dataBack', this.currentIndex, this.currentQuestion);
			},

			submitManager() {
				this.$refs.mainAd.open();

			},



			smartImgManager() {
				console.log("123");
			},


		}
	}
</script>

<style lang='scss' scoped>
	@import "../../colorui/main.css";

	.scroll-Y {
		height: calc(100vh - 300rpx);

	}
</style>